<template>
  <div class="app-container">
    <div>
      <el-select v-model="chooseYear" @change="loadData">
        <el-option v-for="(item,index) in yearOptions" :label="item" :value="item" :key="index"></el-option>
      </el-select>
      <el-button type="primary" class="pull-right" @click="changeHoliday">提交修改</el-button>
    </div>

    <div style="overflow:scroll;margin-top: 10px">
      <div class="month-list">
        <template v-for="(item,mi) in monthList" v-if="monthList && monthList.length > 0">
          <div class="month-item">
            <div class="title">{{ item.year }} 年 {{ item.month }} 月</div>
            <div class="date-list">
              <div class="week">
                <div class="item">日</div>
                <div class="item">一</div>
                <div class="item">二</div>
                <div class="item">三</div>
                <div class="item">四</div>
                <div class="item">五</div>
                <div class="item">六</div>
              </div>
              <div class="days">
                <!-- 月份开头几天可能需要补空 -->
                <template v-if="item.dayList[0].week > index" v-for="(e,index) in item.dayList">
                  <div class="item empty"></div>
                </template>
                <template v-for="(dayItem,index) in item.dayList">
                  <div class="item" :class="{'holiday': dayItem.holidayFlag == 1}" @click="changeItem(dayItem,index,mi)">
                    {{ dayItem.day }}
                  </div>
                </template>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { holidayManage, holidayManageSave } from '@/api/cnaps/date/calendar'
export default {
  name: 'index',
  data() {
    return {
      chooseYear: '',
      yearOptions: [new Date().getFullYear(),new Date().getFullYear()+1,new Date().getFullYear()+2,new Date().getFullYear()+3,new Date().getFullYear()+4],
      monthList: [],
      changeList: []
    }
  },
  mounted() {
    this.chooseYear = this.yearOptions[0]
    this.loadData()
  },
  methods: {
    changeItem(dayItem,index,mi) {
      let exist = this.changeList.find(x => x.day == dayItem.day&&x.month==dayItem.month&&x.year==dayItem.year)
      this.monthList[mi].dayList[index].holidayFlag = this.monthList[mi].dayList[index].holidayFlag == 0 ? 1 : 0
      if(exist) {
        this.changeList.find(x => x.day == dayItem.day&&x.month==dayItem.month&&x.year==dayItem.year).holidayFlag = this.monthList[mi].dayList[index].holidayFlag//exist.holidayFlag == 0 ? 1 : 0
        // this.monthList[mi].dayList[index].holidayFlag = this.monthList[mi].dayList[index].holidayFlag == 0? 1 : 0
      } else {
        // dayItem.holidayFlag = 1;
        this.changeList.push({
          ...dayItem,
          fullDate: `${dayItem.year}${dayItem.month}${dayItem.day}`
        })
      }
    },
    changeHoliday() {
      holidayManageSave(this.changeList).then(res => {
        this.msgSuccess('提交成功');
      })
    },
    loadData() {
      this.monthList = [];
      this.changeList =  [];
      holidayManage({
        year: this.chooseYear,
        bron: 888888
      }).then(res => {
        let monthKeyList = res.result.holidayMap;

        for(let key of Object.keys(monthKeyList)) {

          let dayList = []

          let month = key.substring(key.length - 2);

          for(let days of monthKeyList[key]) {

            if(days.day.indexOf(this.chooseYear) > -1) {

              let tempDay = Number(days.day.substring(days.day.length - 2));
              if(tempDay < 10) {
                tempDay = `0${tempDay}`
              }
              let w = new Date(this.chooseYear + '-' + month + '-' + tempDay).getDay();
              if(w < 10) {
                w = `0${w}`
              }
              let day = {
                ...days,
                day: tempDay,
                week: w
              }
              dayList.push(day)
            }
          }
          if(dayList.length > 0) {

            this.monthList.push({
              year: this.chooseYear,
              month: Number(month),
              dayList: dayList
            })
          }
        }
        this.monthList.sort(this.sortMonth)
      })
    },
    submit() {
      this.loadData()
    },
    sortMonth(x,y) {
      if(x.month < y.month) {
        return -1;
      } else if(x > y) {
        return 1;
      }
      return 0
    }
  }
}
</script>

<style lang="scss" scoped>
.month-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .month-item {
    border: 1px solid #ececec;
    margin-right: 8px;
    margin-bottom: 10px;
    width: 288px;
    .title {
      text-align: center;
      height: 50px;
      line-height: 45px;
      border-bottom: 1px solid #ececec;
      font-size: 15px;
    }
    .day-list {
      padding: 10px;
      font-size: 15px;
    }
    .week {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 8px;
      .item {
        width: 32px;
        line-height: 32px;
        text-align: center;
        margin-right: 6px;
      }
    }
    .days {

      display: flex;
      flex-wrap: wrap;
      .item {
        cursor: pointer;
        width: 32px;
        line-height: 32px;
        text-align: center;
        margin-bottom: 10px;
        background-color: #ffe9c5;
        border-radius: 30px;
        margin-right: 6px;
      }
    }
    .empty {

      background-color: #FFFFFF !important;
    }
    .holiday {
      color: #FFFFFF !important;
      background-color: #1c84c6 !important;
    }
  }
}
</style>
